<template>
  <div class="body-box" v-if="!load">
    <!-- 搜索栏 -->
    <!-- <div>
      <window-title title="活动筛选"></window-title>
      <div style="margin-top:20px;">
        <el-form size="mini" label-position="left" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="活动类型">
                <el-select v-model="type" placeholder="请选择">
                  <el-option
                    v-for="item in type_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="活动状态">
                <el-select v-model="state" placeholder="请选择">
                  <el-option
                    v-for="item in state_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报名时间">
                <el-date-picker
                  v-model="sign_time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="报名范围">
                <el-select v-model="limit" placeholder="请选择">
                  <el-option
                    v-for="item in limit_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否暂停">
                <el-select v-model="suspen" placeholder="请选择">
                  <el-option
                    v-for="item in suspen_list"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="活动时间">
                <el-date-picker
                  v-model="active_time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="活动名称">
                <el-input placeholder="请输入活动名称" v-model="name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button class="com-btn" icon="el-icon-search" size="mini" @click="search()">查询</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div> -->
    <!-- <el-tabs v-model="activeName" @tab-click="changeTabs">
      <el-tab-pane name="1">
        <span slot="label">
          全部
          <span class="tab-badge">0</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="2">
        <span slot="label">
          报名未开始
          <span class="tab-badge">0</span>
        </span>
      </el-tab-pane>
      <el-tab-pane name="3">
        <span slot="label">
          报名中
          <span class="tab-badge">0</span>
        </span>
      </el-tab-pane>
    </el-tabs> -->
    <window-title title="草稿箱列表"></window-title>
    <div>
      <!-- 列表存在数据 的时候 -->
      <div v-if="list.data.length > 0">
        <active-list :handle="true" :list="list.data" @refesh="getData()"></active-list>
        <div class="page-box">
          <el-pagination
            background
            small
            :current-page="list.current_page"
            :page-size="list.per_page"
            layout="total, prev, pager, next, jumper"
            :total="list.total"
            @current-change="changePage"
          ></el-pagination>
        </div>
      </div>
      <div class="list-empty" v-else>
        <img src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/7b01bdfe3f80378002f7ca7c4e77ec3.png" alt="">
        <div>暂无任何活动数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import windowTitle from "../../components/unit/title.vue";
import activeList from "./list-table.vue";

export default {
  components: { windowTitle, activeList },
  data() {
    return {
      activeName: "1",
      sign_time: "",
      active_time: "",
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      type_list: [
        { value: "", label: "全部" },
        { value: 1, label: "赛事" },
        { value: 2, label: "活动" },
        { value: 3, label: "任务" }
      ],
      type: "",
      state_list: [
        { value: "", label: "全部" },
        { value: 1, label: "未报名" },
        { value: 2, label: "报名中" },
        { value: 3, label: "报名结束" },
        { value: 4, label: "进行中" },
        { value: 5, label: "已结束" }
      ],
      state: "",
      limit_list: [
        { value: "", label: "全部" },
        { value: -1, label: "所有人" },
        { value: 0, label: "跑团会员" },
        { value: 1, label: "高级会员" }
      ],
      limit: "",
      suspen_list: [
        { value: "", label: "全部" },
        { value: 1, label: "是" },
        { value: 0, label: "否" }
      ],
      suspen: "",
      name: "",
      list: {
        current_page: 1,
        data: []
      },
      load : true
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取列表数据
    getData() {
      this.ajaxs("active/activeDrafts", {
        data: {
          page: this.list.current_page,
          type: this.type,
          state: this.state,
          limit: this.limit,
          suspen: this.suspen,
          name: this.name,
          sign_time: this.sign_time,
          active_time: this.active_time,
          activeName: this.activeName
        },
        success: res => {
          this.list = res.msg;
          for (var i in this.list.data) {
            if (this.list.data[i].cover.indexOf("?") == -1) {
              this.list.data[i].cover =
                this.list.data[i].cover + "?x-oss-process=image/resize,h_200";
            }
          }
          this.load = false;
        }
      });
    },
    //分页
    changePage(e) {
      this.list.current_page = e;
      this.getData();
    },
    //查询
    search() {
      this.list.current_page = 1;
      this.getData();
    },
    //切换tab
    changeTabs(e) {
      this.search();
    }
  }
};
</script>

<style>
.list-empty{
  text-align: center;
  margin-top: 20px;
}
.list-empty > img{
  width: 80px
}
.list-empty > div{
  color: #999;
  margin-top: 10px;
}
</style>